<template>
  <div class="indexContriner">
      <div class="left-btn"  @click="fn1"><i class="iconfont icon-xiangzuojiantou"></i></div>
      <div class="playvideo-left">
        <div class="left-text">即将切换</div>
        <ElButton @click="handleClose" class="play-btn" :icon="Close" circle></ElButton>
        <video class="play-video" autoplay controls :src="videourl||mvurl"></video>
        <ElButton @click="handleVideoNext" id="prev" class="play-pige" :icon="ArrowUp" circle></ElButton>
        <template></template>
        <ElButton @click="handleVideoNext" id="next" class="play-next" :icon="ArrowDown" circle></ElButton>
      </div>
      <ElScrollbar>
      <TransitionGroup name="hello" appear>
      <div v-if="isShow" class="play-right">
            <div class="right-btn" @click="fn2"><i class="iconfont icon-xiangyoujiantou"></i></div>
          <div class="profile-user">
            <img class="avatar-img" :src="videocontent.coverUrl">
            <div>
            <span class="profile-left">{{videocontent.creator.nickname}}</span>
            <span class="profile-right">{{videocontent.playTime}}</span>
            </div>
            <ElButton class="play-right-btn" color="#FE3666" :icon="Plus" round>关注</ElButton>
          </div>
          <p class="play-p">
          {{videocontent.title}}
          </p>
          <div class="intera">
          <div><img class="intera-img" src="../../static/image/爱心.png">5.1w</div>
          <div><img class="intera-img" src="../../static/image/分享.png">分享</div>
          <div><img class="intera-img" src="../../static/image/不感兴趣.png">不感兴趣</div> 
          </div>
             <div class="comment-input">
              <img class="input-img" src="../../static/image/img_avatar.1d4c4a34.gif" alt="">
              <div class="input-container">
              <textarea class="input-text"  placeholder="说点什么..." />
              </div>
              <div class="input-btn">
              <ElButton round>取消</ElButton>
              <ElButton color="#FE3666" round>确定</ElButton>
              </div>
            </div>
            
            <div class="commit-list" >
             <ul v-for="mvtxet in mvcontent" :key="mvcontent.commentId">
                <li>
                    <div class="item">
                    <div>
                    <img class="input-img" :src="mvtxet.user.avatarUrl" />
                    </div>
                          <div class="item-text">
                          <span class="item-left">{{mvtxet.user.userId}}</span>
                          <span class="item-right">{{mvtxet.user.time}}</span>
                          </div>
                    </div>
                    <span class="item-title">社交牛逼症</span>
                    <div class="item-warp">
                        <span class="item-span">{{mvtxet.user.nickname}} : {{mvtxet.content}}</span>
                        <div class="intera">
                            <div><img class="intera-img" src="../../static/image/爱心.png">{{mvcontent.likedCount}}喜欢</div>
                            <div><img class="intera-img" src="../../static/image/回复.png">回复</div>
                        </div>
                        <p>查看更多回复(17)<div><img class="intera-img" src="../../static/image/回复.pngs"></div></p>
                    </div>
                </li>
              </ul>
            </div>
       </div>
       </TransitionGroup>
      </ElScrollbar>
    </div>
</template>
<script lang="ts">
import {defineComponent} from 'vue'
export default defineComponent({
  name:'PlayVideo',
})
</script>
<script lang="ts" setup>
import PubSub from 'pubsub-js'
import {ElButton,ElScrollbar} from 'element-plus'
import {Close,ArrowUp,ArrowDown,Plus } from '@element-plus/icons'
import { GetPlayVideoList,GetMvVideoList,GetMvtext, GetVideoText } from '@/api/VideoList'
import {ref,onMounted} from 'vue'
import {useRoute,useRouter} from 'vue-router'
let videourl = ref('')
const mvurl = ref('')
const mvcontent = ref('')
const videocontent = ref('')
const isShow=ref(false)
 const route = useRoute()
 const router = useRouter()
 const id = route.query.vid
const fn1=()=>{
  isShow.value=true
  // document.querySelector('.playvideo-left').style.width = (1519-462)+'px',
  // document.querySelector('.play-video').style.left = '528.5px',
}
const fn2=()=>{
  isShow.value=false
  // document.querySelector('.playvideo-left').style.width = '',
  // document.querySelector('.play-video').style.left = '',
}
onMounted(() => {
  isShow.value=true
})
const handleClose=()=>{
      router.go(-1)
 }
onMounted(async() => {
  if(!id){
    return
    };
     const result = await GetPlayVideoList(id);
     videourl.value = result.urls[0].url;
         console.log(result)

})
onMounted(async() => {
  const result3 = await GetVideoText(id)
  videocontent.value = result3.data
  console.log(result3.data)
})
 const mvid = route.query.mvid
 onMounted(async () => {
    if(!mvid){
    return
    };
   const result1 = await GetMvVideoList(mvid)
    mvurl.value = result1.data.url
    // console.log(result1)
 })

 onMounted(async() => {
       if(!mvid){
    return
    };
   const result2 = await GetMvtext(mvid);
   mvcontent.value = result2.hotComments
 })

 
const handleVideoNext = ()=>{
  PubSub.publish('videoType','next')
}
PubSub.subscribe('vid', async (msg,data)=>{

  // console.log('vid', msg, data);
  const result4 = await GetPlayVideoList(data);
  videourl.value = result4.urls[0].url
   
})

</script>

<style lang="less">
@import url(//at.alicdn.com/t/font_2889834_e8uhku6q5p5.css);
*{
  margin: 0;
  padding: 0;
}
.indexContriner{
  display: flex;
  justify-content: space-between;
  position: relative;
  height: 100%;
}
.playvideo-left{
  width:100%;
  height:694px;
}
.play-btn{
  position: fixed;
  top: 30px;
  left: 30px;
  width: 56px;
  height: 56px;
}
.play-video{
  position: absolute;
  top: 0;
  // left: 500px;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  height: 694px;
}
.play-pige{
  position: absolute;
  left: 50%;
  transform: translateX(220px);
  top: 550px;
  width: 56px;
  height: 56px;
  color: #999;
}
.play-next{
  position: absolute;
    left: 50%;
    transform: translateX(220px);
    top: 630px;
    width: 56px;
    height: 56px;
      color: #999;
}
.left-text{
  position: fixed;
  display: none;
  top: 35px;
  left: 632px;
  z-index: 100;
  border-radius: 5px;
  background-color: #ccc;
}
.play-right{
  position: fixed;
  top: 0;
  right: 0;
  width: 382px;
  padding: 40px;
  background-color: #222;
}

.right-btn{
  position: absolute;
  top: 300px;
  left: 0;
  width: 25px;
  height: 50px;
  line-height: 50px;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  color: #fff;
  background-color: #292929;
}
.left-btn{
  position: absolute;
  top: 300px;
  right: 0;
  width: 25px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  color: #fff;
  background-color: #292929;
  cursor:test
}
.profile-user{
  display: flex;
  align-items: center;
  width: 382px;
  height: 40px;
  line-height: 40px;
  margin-bottom: 16px;
  }
.play-right-btn{
 position: absolute;
 top: 40px;
 right:40px;
}
.avatar-img{
  width: 40px;
  height: 40px;
  margin-right:14px;
  border-radius: 50%;
}
.profile-left{
font-size: 16px;
color: #999;
margin-right:14px;
}
.profile-right{
  color: #999;
font-size: 12px;
}
.intera{
  height: 20px;
  line-height: 20px;
  display: flex;
  padding: 16px 0 40px ;
}
.intera div{
  margin-right: 23px;
}
.play-p{
  width: 382px;
  height: auto;
  color: #fff;
  font-size: 17px;
}
.intera-img{
  width: 17px;
  height: 17px;
  vertical-align: middle;
  margin-right: 10px;
}
.intera div{
  color: #999;
}
.comment-input{
  display: flex;
  position: relative;
  width: auto;
  height: 158px;
  margin-bottom: 24px;
}
.input-container{
  margin-left: 10px;
  background-color: #292929;
}
.input-img{
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.input-text{
  padding: 8px;
  font-size: 16px;
  height: 90px;
  width: 344px;
  background-color: #292929;
}
.input-btn{
  position: absolute;
  bottom: 10px;
  right: 0;
  height: 32px;
}
.commit-list{
  width: 382px;
  height:100%;
}
.item{
  display: flex;
  align-items: center;
}
ul{
  list-style: none;
}
.item-warp{
  padding: 14px;
  margin: 19px 0 0 38px;
  background-color: #292929;
}
.item-left{
  margin-left: 10px;
  color: #999;
}
.item-right{
  color: #999;
  margin-left: 8px;
}
.item-title{
  margin-left: 38px;
  padding-top: 9px;
  height: 32px;
  color: #999;
}
.item-span{
  height: 30px;
  color: #fff;
}

.hello-enter-active {
  animation: atguigu 1s ease;
}
.hello-leave-active {
  animation: atguigu 1s ease reverse;
}


@keyframes atguigu {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0px);
  }
}
.profile-left:hover{
  color:#fe3666;
}
.play-p:hover{
  color:#fe3666;
}
</style>